<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<textarea name="" id="a" cols="30" rows="10"></textarea>

	<div>
		<button id="c">转大写</button>
		<button id="d">转小写</button>
	</div>

	<textarea name="" id="b" cols="30" rows="10"></textarea>


	<script>
		var a = document.querySelector("#a");
		var b = document.querySelector("#b");
		var c = document.querySelector("#c");
		var d = document.querySelector("#d");

		// 点击转大写，把a文本框的内容转成大写后，赋值到b文本框
		c.addEventListener('click',function(){
			b.value = a.value.toUpperCase();
		})

		// 点击转小写，把a文本框的内容转成小写后，赋值到b文本框
		d.addEventListener('click',function(){
			b.value = a.value.toLowerCase();
		})
	</script>
</body>
</html>